<template>
  <div ref="scrollRef" class="k-doc-wrapper">
    <a-space direction="vertical" fill>
      <a-page-header :title="documentOption?.summary" :show-back="false">
        <template #extra>
          <a-space>
            <a-button type="primary">复制接口</a-button>
            <a-button type="primary">复制文档</a-button>
            <a-button type="primary">复制地址</a-button>
          </a-space>
        </template>
      </a-page-header>
      <a-descriptions>
        <a-descriptions-item label="请求数据类型">
          <a-tag color="cyan">{{ documentOption?.consumes[0] || 'application/x-www-form-urlencoded;charset=UTF-8' }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="响应数据类型">
          <template #default>
            <a-space>
              <a-tag v-for="(item, index) in documentOption?.produces" :key="index" color="cyan">{{ item }}</a-tag>
            </a-space>
          </template>
        </a-descriptions-item>
      </a-descriptions>
      <div class="flex bg-gray-100 dark:bg-gray-600 py-2 px-4 mb-4">
        <span class="k-api border-r border-gray-300 pr-4" :class="`k-api-${documentOption?.method}`">{{ documentOption?.method.toUpperCase() }}</span>
        <span class="flex-1 pl-8 text-gray-600 dark:text-gray-200">{{ documentOption?.api }}</span>
      </div>
      <CustomDescription :data="documentOption?.parameters || []" title="请求参数" class="mb-4" @click="handleNativeClickEvent">
        <a-table-column title="参数名称" data-index="name" :width="200" />
        <a-table-column title="参数说明" data-index="description" />
        <a-table-column title="请求类型" data-index="in">
          <template #cell="{ record: { in: requestType } }">
            <span :class="`k-request-${requestType}`">{{ requestType }}</span>
          </template>
        </a-table-column>
        <a-table-column title="是否必须" data-index="required">
          <template #cell="{ record: { required } }">
            <span :style="{ color: required ? '#de1c31' : '' }">{{ required }}</span>
          </template>
        </a-table-column>
        <a-table-column title="数据类型" data-index="type" />
        <a-table-column title="schema" data-index="schema.originalRef" :width="200" />
      </CustomDescription>
      <CustomDescription :data="documentOption?.responses || []" title="响应状态" class="mb-4">
        <a-table-column title="状态码" data-index="code" :width="360" />
        <a-table-column title="参数说明" data-index="description" />
        <a-table-column title="schema" data-index="schema" :width="360" />
      </CustomDescription>
      <!-- 判断是否有多组参数 -->
      <template v-if="documentOption?.responsesParameters && documentOption?.responsesParameters.length > 1">
        <CustomDescription :data="documentOption?.responsesParameters[0].data || []" title="响应参数" class="mb-4">
          <a-table-column title="参数名称" data-index="name" :width="360" />
          <a-table-column title="参数说明" data-index="description" />
          <a-table-column title="类型" data-index="type" />
          <a-table-column title="schema" data-index="schemaValue" :width="360" />
        </CustomDescription>
      </template>
      <template v-else-if="documentOption?.responsesParameters && documentOption?.responsesParameters.length === 1">
        <CustomDescription :data="documentOption?.responsesParameters[0].data || []" title="响应参数" class="mb-4">
          <a-table-column title="参数名称" data-index="name" :width="360" />
          <a-table-column title="参数说明" data-index="description" />
          <a-table-column title="类型" data-index="type" />
          <a-table-column title="schema" data-index="schemaValue" :width="360" />
        </CustomDescription>
      </template>
      <!-- <CustomDescription v-else :data="[]" title="响应参数" class="mb-4" /> -->

      <div class="k-response-example">
        <h4 class="quote">响应示例</h4>

        <template v-if="documentOption?.responsesParameters[0].responseText">
          <KCode :code="documentOption.responsesParameters[0].responseText" />
        </template>
        <a-empty v-else />
      </div>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  // import { defaultProps, documentInjectionKey, IDocumentProps } from '@/views/document/types'
  import { useDebounceFn } from '@vueuse/core'
  import BScroll from 'better-scroll'
  import CustomDescription from '../CustomDescription'

  const scrollRef = ref<HTMLElement>()
  const docScroll = ref<BScroll>()
  const knifeStore = useKnifeStore()

  onMounted(() => {
    docScroll.value = new BScroll(scrollRef.value as HTMLElement, { scrollY: true, scrollX: true, click: true, mouseWheel: true, preventDefault: false })
    useResizeObserver(
      scrollRef,
      useDebounceFn(() => docScroll.value?.refresh(), 200)
    )
  })

  // const documentParams = inject<IDocumentProps>(documentInjectionKey, defaultProps)
  // console.log('documentParams', knifeStore.documentOption)

  const { documentOption } = storeToRefs(knifeStore)

  const handleNativeClickEvent = (e: Event) => {
    console.log('father e', e)
  }
</script>

<style lang="less" scoped>
  .k-doc-wrapper {
    height: calc(100vh - 130px);
    min-width: 780px;

    .quote {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: var(--color-text-2);
      &::before {
        display: inline-block;
        content: '';
        background-color: rgb(var(--primary-6));
        width: 5px;
        height: 15px;
        margin-right: 10px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
</style>
